package content.views.works;
import feffects.easing.Back;
import feffects.easing.Elastic;
import feffects.easing.Quad;
import feffects.easing.Quint;
import feffects.easing.Sine;
import feffects.Tween;
import haxe.Timer;
import js.Lib;
import tools.ASprite;
import tools.BoundProvider;
import js.w3c.html5.Core.HTMLImageElement;
import js.w3c.level3.Events.Event;

/**
 * ...
 * @author PRASS
 */

class ScreenWorks extends ASprite 
{

	private var _currentLayer 	: ASprite;
	private var _desc			: LayerWorks;
	private var _demo	 		: DemoPlayer;
	private var _miniNav		: MiniNav;
	
	private var _data			: Object;
	private var _firstLoad		: Bool;
	
	private var _first			: ScreenShot;
	private var _second			: ScreenShot;
	private var _third			: ScreenShot;
	private var _end			: ASprite;
	
	private var _timer			: Timer;
	
	public function new( dom : JQuery ) 
	{
		super(dom);
		
		visible(false);
		
		var html : String = '	<div id="currentLayer" class="layer">
									<div id="firstShot" class="shots"></div>
									<div id="secondShot" class="shots"></div>
									<div id="thirdShot" class="shots"></div>
									<div id="endDeco"><img src="img/elements/sep_end_works.png" /></div>
								</div>
								<div id="miniNav"></div>
								<div id="descProdz"></div>
								<div id="demoPlayer"></div>';
							
		dom.append(html);
		
		_first 			= new ScreenShot(new JQuery("#firstShot"),"A");
		_second 		= new ScreenShot(new JQuery("#secondShot"),"B");
		_third	 		= new ScreenShot(new JQuery("#thirdShot"), "C");
		
		_end 			= new ASprite( new JQuery("#endDeco") );
		
		_currentLayer 	= new ASprite(new JQuery("#currentLayer"));
		_desc			= new LayerWorks( new JQuery("#descProdz") );
		_demo 			= new DemoPlayer( new JQuery("#demoPlayer") );
		_miniNav		= new MiniNav( new JQuery("#miniNav"), _currentLayer, _unactiveAllShots );
		
		_desc.demoButton().mousedown( function(e) { _displayVideoPlayer(e); } );
		
		_firstLoad = true;
		
		_end.dom.css("position", "absolute");
		
		setAlpha(0);
		_currentLayer.setY(0);
	}
	
	/*
	 * Display & Hide
	 */ 
	public function display() : Void
	{
		tween(0, setAlpha, 1, 600, Quad.easeOut );
		
		if(!_firstLoad) _miniNav.display();
	}
	
	public function hide() : Void
	{
		_demo.hide();
		tween(1, setAlpha, 0, 500, Quad.easeOut );
		
		_miniNav.hide();
		
		_unactiveAllShots( true );
	}
	
	/* Video */
	private function _displayVideoPlayer(e) : Void
	{
		_unactiveAllShots(false);
		
		_demo.buildAndPlay( _data.demo );
	}
	
	private function _unactiveAllShots( hardKill : Bool = false ) : Void
	{
		_first.unactive( hardKill );
		_second.unactive( hardKill);
		_third.unactive( hardKill );
	}
	
	/*
	 * Works
	 */ 
	public function switchContent( data : Object ) : Void
	{
		_data = data;
		
		_miniNav.reInit();
		
		if (_demo.isOpen) _demo.hide();
		
		_desc.build(_data);
		
		_first.load( _data.pic[0] );
		_second.load( _data.pic[1] ,250);
		_third.load( _data.pic[2] ,400);
		
		if (_firstLoad)
		{
			_firstLoad = false;
			_first.tween(0, _first.setAlpha, 1, 400, Quad.easeInOut);
			_second.tween(0, _second.setAlpha, 1, 400, Quad.easeInOut, null, 200);
			_third.tween(0, _third.setAlpha, 1, 400, Quad.easeInOut, null, 200);
			
			visible(true);
			
			_miniNav.display();
		}
	}

	
	/*
	 * Resize 
	 */
	public function resize( _w : Int, _h : Int ) : Void
	{
		setWidth(_w);
		setHeight(_h);
		
		_currentLayer.setWidth(_w);
		_currentLayer.setHeight(_h);

		_currentLayer.setX( 316 );
		
		_first.resize(_w - 50, _h - 50);
		_second.resize(_w - 50, _h - 50);
		_third.resize(_w - 50, _h - 50);
		
		var _left : Int = 50;
		
		if ( _w < 744) _left = 25;
		
		_first.setX(_left);
		_first.setY(100);
		
		_second.setX( _left );
		_second.setY( cast ( _first.getY() + _first.getHeight() + _left ) );
		
		_third.setX( _left );
		_third.setY( cast ( _second.getY() + _second.getHeight() + _left ) );
		
		_end.setY( cast( _third.getY() + _third.getHeight() + 60 ) );
		_end.setX( cast( _left - 75 + ( _third.getWidth() * .5) ) );
		
		_desc.setX( cast ( _first.getX() + _first.getWidth() + _left + 316 ) );
		_miniNav.setX( _desc.getX()  );
		_miniNav.setY(360);
				
		_miniNav.midY 	= -_first.regH - _left;
		_miniNav.endY	= -_first.regH * 2 - (_left*2);
		
		_demo.resize(_w,_h);
	}

	
}